<template>
  <div class="data_input">
    <!-- 省市区级联选择器 -->
    <div class="pca">
      <el-cascader-panel
        @change="pcaChange"
        v-model="form.pca"
        :props="{ label: 'name', value: 'name' }"
        :options="pca"
      ></el-cascader-panel>
    </div>
    <!-- 表单 -->
    <div class="form">
      <el-row>
        <el-col :span="12">
          <el-form
            label-width="80px"
            size="small"
            :model="form"
            :rules="inputRules"
            ref="inputRules"
          >
            <el-form-item label="确诊" prop="confirmed">
              <el-input v-model.number="form.confirmed"></el-input>
            </el-form-item>
            <el-form-item label="疑似" prop="suspected">
              <el-input v-model.number="form.suspected"></el-input>
            </el-form-item>
            <el-form-item label="死亡" prop="dead">
              <el-input v-model.number="form.dead"></el-input>
            </el-form-item>
            <el-form-item label="治愈" prop="cure">
              <el-input v-model.number="form.cure"></el-input>
            </el-form-item>
            <el-form-item label="重症" prop="severe">
              <el-input v-model.number="form.severe"></el-input>
            </el-form-item>
            <el-form-item label="境外输入" prop="outside">
              <el-input v-model.number="form.outside"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="submit">
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" style="padding: 0 1em; color: red; font-size: 10px">
          <div>温馨提示：</div>
          <div>
            <p>1. 选中城市</p>
            <p>2. 录入数据</p>
            <p>疫情防控，众志成城</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- {{form}} -->
  </div>
</template>

<script>
import pca from "@/assets/pca.json";
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      pca,
      form: {
        country: "中国",
      },
      inputRules: {
        confirmed: [
          { required: true, message: "请输入确诊人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" },
        ],

        suspected: [
          { required: true, message: "请选择疑似人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" }
        ],
        dead: [
          { required: true, message: "请输入死亡人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" }
        ],
        cure: [
          { required: true, message: "请输入治愈人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" }
        ],
        severe: [
          { required: true, message: "请输入重症人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" }
        ],
        outside: [
          { required: true, message: "请输入境外输入人数", trigger: "blur" },
          { type: "number", message: "输入必须为数字值", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs["inputRules"].validate((valid) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // 将form数据进行克隆
      let data = Object.assign({}, this.form);
      // 如果是更新操作，无需处理省市区
      if (!this.form.id) {
        data.province = this.form.pca[0];
        data.city = this.form.pca[1];
        data.area = this.form.pca[2];
        delete data.pca;
      }

      // 交互
      let url = "/epidemic/saveOrUpdate";
      post(url, data).then((response) => {
        this.$message({ type: "success", message: response.message });
      });
      this.form = {};
    },
    // 当地理位置发生变化的时候
    pcaChange(val) {
      // 获取当前时间 2020-09-02
      let inputTime = moment(new Date().getTime()).format("YYYY-MM-DD");
      let param = {
        page: 1,
        pageSize: 10,
        province: val[0],
        city: val[1],
        area: val[2],
        inputTime,
      };
      let url = "/epidemic/pageQuery";
      get(url, param).then((response) => {
        let resp = response.data;
        // 有数据，之前录入了，修改
        if (resp.total > 0) {
          this.form = resp.list[0];
        } else {
          //如果没有数据，保留默认值，一定要有pca
          this.form = { country: "中国", pca: this.form.pca };
        }
      });
    },
  },
};
</script>

<style scoped>
.pca {
  margin-bottom: 0.5em;
}
</style>
